<template>
	<view class="goods-item d-flex flex-shfrink ml-3 pr-3 border-box mb-3 w-100" @click="go('/pages/goodsdetail/goodsdetail?id='+item.id)">
		<view class="d-flex a-center h-100">
			<image :src="cover" class="mr-2" mode=""></image>
			<view class="d-flex flex-column  flex-wrap  h-100" style="width: 60%;">
				<text class="overflow-line-1 font-md text-dark font-weight-600">{{item.excerpt}}</text>
				<text class="overflow-line-2 font-md text-light-dark-most">{{item.remark}}的数据发送方技术的开发来决定是否快乐是就士大夫昆仑山搭街坊昆仑山地方记录</text>
			
				<text class="mt-auto" v-if="item.type_id==1">品相：良好</text>
				<text class="mt-auto" v-if="item.type_id==2">品相：一般</text>
				<text class="mt-auto" v-if="item.type_id==3">品相：优秀</text>
			</view>
		</view>
		<view class="d-flex a-center j-sb a-end">
			<view class="goods-price">
				<text class="font-md">￥</text>
				<text class="font-md" >{{item.price}}</text>
			</view>
			
		</view>
	<!-- 	<view class="user-msg d-flex a-center mt-1">
			<image :src="item.useravatar" mode=""></image>
			<text class="overflow-line-2 text-light-dark font-sm">{{item.username}}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			}
		},
		computed: {
			cover() {
				if (typeof this.item.images == 'string') {
					return JSON.parse(this.item.images)[0].url
				} else {
					return this.item.images[0].url
				}
			}
		}
	}
</script>

<style>
	.goods-item{
		width: 100%;
		flex-shrink: 0;
		height: 300rpx;
		/* padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx; */
	}
	.goods-item image {
		width: 260rpx;
		height: 100%;
		/* border-radius: 20rpx; */
	}
	.user-msg image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.goods-price {
		color:#F44602;
		font-weight: 600;
	}
	.search-box {
		position: relative;
	}
	.search-box input {
		box-sizing: border-box;
		border:2px solid #F5DEB3;
		border-radius: 20px;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		padding:20rpx;
		font-size: 30rpx;
		padding-left: 60rpx;
	}
	.search-btn {
		position: absolute;
		top:0;
		right:0;
		width: 160rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #F5DEB3;
		color:#333
	}
</style>